<template>
    <div class="leetcodeHeader-container">
        <SvgIconG v-if="logo !== ''" :name="logo" class="icon"></SvgIconG>
        <ul>
            <li class="item" v-for="item in listis">
                <span v-if="!item.statu">{{ item.title }}</span>
                <div class="shop" v-if="item.statu">
                    <span>
                        <button @click="suclick">
                            {{ item.title }}
                            <SvgIconG name="arrow" class="arrow"></SvgIconG>
                        </button>
                    </span>
                    <ul>
                        <li class="shop-li" v-for="(title, i) in item.statulist" key="i" @click="toggleActive(i)"> {{ title }} </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
defineOptions({
    name: 'sr-leetcodeHeader'
})
import { withDefaults, ref } from 'vue';
withDefaults(defineProps<{
    listis: any
    logo?: string
}>(), {
    logo: ""
})
let isDisplay = ref("none")
function suclick() {
    isDisplay.value = isDisplay.value === "none" ? "flex" : "none"
}

const toggleActive = (index : number) => {
   const shopLi = document.querySelectorAll(".shop-li")
   shopLi.forEach((item:any) => { 
           item.classList.remove("active")
   });
   shopLi[index].classList.add("active")
};
</script>

<style scoped lang="scss">
.leetcodeHeader-container {
    width: 100%;
    height: 50px;
    border: 2px solid #ebebeb;
    display: flex;
    align-items: center;

    .icon {
        margin-left: 120px;
        width: 80px !important;
        height: 25px !important;
    }

    ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        align-items: center;

        .item {
            font-size: 15px;
            margin-left: 15px;
            color: #737373;
        }

        .item:hover {
            cursor: pointer;
            color: #1a1a1a
        }

        .shop {
            position: relative;

            span {
                button {
                    width: 30px;
                    height: 30px;
                    all: initial;
                    color: #ffa116;
                    cursor: pointer;
                    margin-bottom: 1px;
                    .arrow {
                        margin-left: 3px;
                        width: 10px;
                        height: 10px;
                    }
                }
            }

            ul {
                display: v-bind("isDisplay");
                position: absolute;
                margin-top: 17px;
                width: 90px;
                height: 120px;
                flex-direction: column;
                text-align: center;
                align-items: center;
                border-radius: 10px;
                box-shadow: 0px 1px 3px #0000000a, 0px 4px 12px #00000014;

                .shop-li {
                    font-size: 15px;
                    color: #ffa116;               
                    border-radius: 5px;
                    padding: 8px;
                    transition: background-color 0.3s;
                    
                }

                .shop-li:hover {
                    cursor: pointer;
                }
                .shop-li.active{
                    background-color: #f7f7f7
                }
            }

        }
    }
}
</style>